<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
  <script src="../babel.js"></script>
  <script src="../common.js"></script>
</head>
<body>
  
  <script type="text/babel">
    /**
    React 组件 API

        设置状态：setState
        替换状态：replaceState
        设置属性：setProps
        替换属性：replaceProps
        强制更新：forceUpdate
        获取DOM节点：findDOMNode
        判断组件挂载状态：isMounted
    */

    /**
      设置状态:setState

        setState(object nextState[, function callback])

      参数说明

          nextState，将要设置的新状态，该状态会和当前的state合并
          callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

      合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
      关于setState

      不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

      setState()并不会立即改变this.state，而是创建一个即将处理的state。
      setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

      setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。    
    */

    class Demo extends React.Component{
      constructor(props){
        super(props);
        this.state={
          count:0
        }
        this.clickPlusCount = this.clickPlusCount.bind(this)
      }

      clickPlusCount(){
        //注意 this.setState 是个函数 ，小括号 是必须的
        this.setState({
          count : this.state.count+1
        })
      }

      render(){
        return(
          <h2 onClick={this.clickPlusCount}> 点击我，count:{this.state.count} </h2>
        )
      }
    }

    let c = new Common;
    let app = c.create();
    ReactDOM.render(
      <Demo/>,
      app
    )
  </script>
</body>
</html>